<template>
  <div class="node_setting">
    <div class="setting_title">指标</div>
    <div class="setting_item">
      <el-form :model="form" label-width="110px">
        <el-form-item label="私有指标维度">
          <el-table
            ref="tableRef"
            class="infinite-list-item"
            :data="getPrivateDimensions(props.settingData._value.indicatorId)"
            height="450"
            style="width: 100%"
            :row-key="(row) => row.id"
            border
            @selection-change="handleSelectionChange"
          >
            <el-table-column type="selection" width="55" />
            <el-table-column fixed prop="dimensionColumn" label="私有维度" />
          </el-table>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script lang="ts">
export default { name: "IndicatorSetting" };
</script>
<script setup lang="ts">
import LogicFlow from "@logicflow/core";
import { MyLogicFlowPropertiesType } from "@/types/logic-flow";
import IndicatorThemeAPI, { IndicatorIds, IndciatorDimension } from "@/api/themeTable/index";
const props = defineProps<{
  lf?: LogicFlow;
  data: LogicFlow.NodeData | LogicFlow.EdgeData;
  settingData: {
    indicatorId: any;
    ids: any[];
  };
}>();
const form = ref({
  privateDimensionList: [] as IndciatorDimension[],
  selectedPrivateDimensionIds: [] as number[],
});

const idsQuery = reactive<IndicatorIds>({});
const publicDimensionList = ref<IndciatorDimension[]>();

async function handleQuery() {
  idsQuery.indicatorIds = props.settingData._value.ids;
  await IndicatorThemeAPI.DimensionList(idsQuery).then((data) => {
    form.value.privateDimensionList = data.privateDimensionList!;
  });
  echoSelection();
}

const tableRef = ref();

// 获取指定指标的私有维度
const getPrivateDimensions = (indicatorId: number) => {
  return form.value.privateDimensionList?.filter((d) => d.indicatorId === indicatorId) || [];
};

watch(
  () => props.data,
  (newVal) => {
    const { privateDimensionList, selectedPrivateDimensionIds } =
      newVal.properties as MyLogicFlowPropertiesType;
    form.value = {
      privateDimensionList: privateDimensionList || [],
      selectedPrivateDimensionIds: selectedPrivateDimensionIds || [],
    };
    props.lf?.setProperties(newVal.id, {
      ...form.value,
    });
  },
  {
    immediate: true,
  }
);

// 监听指标ID变化，切换节点时主动请求数据
watch(
  () => props.settingData._value.indicatorId,
  (newIndicatorId) => {
    if (newIndicatorId && props.settingData._value.ids) {
      console.log("切换到指标ID:", newIndicatorId);
      handleQuery();
    }
  },
  {
    immediate: true,
  }
);

const handleSelectionChange = (selectedItems: any) => {
  form.value.selectedPrivateDimensionIds = selectedItems.map((item: any) => item.id);
  props.lf?.setProperties(props.data.id, {
    selectedPrivateDimensionIds: form.value.selectedPrivateDimensionIds,
  });
};

const toggleSelection = (rows?: IndciatorDimension[], ignoreSelectable?: boolean) => {
  if (rows) {
    rows.forEach((row) => {
      tableRef.value!.toggleRowSelection(row, undefined, ignoreSelectable);
    });
  } else {
    tableRef.value!.clearSelection();
  }
};

// 实现勾选效果的回显
const echoSelection = () => {
  if (tableRef.value && form.value.privateDimensionList) {
    const selectedRows = form.value.privateDimensionList.filter((row: any) =>
      form.value.selectedPrivateDimensionIds.includes(row.id)
    );
    toggleSelection(selectedRows);
  }
};

onMounted(() => {
  const ids = props.lf?.getProperties(props.data.id);
  console.log(ids);
  toggleSelection();
  if (props.settingData._value.ids) {
    console.log(props.settingData._value.ids);
    handleQuery();
  } else {
    ElMessage.warning("请勾选指标，会自动在画布上创建节点");
  }
});
</script>
<style lang="scss" scoped>
.setting-title {
  padding: 10px 0;
  margin-bottom: 10px;
  font-size: 16px;
  font-weight: bold;
  text-align: center;
  border-bottom: 1px solid #e9e9e9;
}

.setting-item {
  .setting-item-title {
    padding: 10px 0;
    margin-bottom: 10px;
    font-size: 14px;
    font-weight: bold;
    border-bottom: 1px solid #e9e9e9;
  }

  .table_infinite_list {
    height: calc(100% - 20px);
    padding: 0;
    margin: 0;
    list-style: none;
  }

  .table_infinite_list .table_infinite_list_item {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 20px;
    // background: var(--el-color-primary-light-9);
    margin: 10px;
    // color: var(--el-color-primary);
  }

  .table_infinite_list .table_infinite_list_item + .list-item {
    margin-top: 10px;
  }
}
</style>
